<template>
    <div class="listDiv pd20">
        <div class="searchDiv">
            <el-form class="searchLeft" ref="serform" :model="obj.req" label-position="top">
                <el-form-item class="mr20 mb10">
                    <span class="btn add" @click="add">添加单位</span>
                </el-form-item>
                <el-form-item class="serlabelB mr20 mb10" label="单位名称：" prop="key">
                    <el-input v-model="obj.req.key" placeholder="请输入单位名称" class="search_key" clearable />
                </el-form-item>
                <span class="btn search mb10 mr5" @click="obj.req.currentpage=1;init()">查询</span>
                <span class="btn refresh mb10 mr5" @click="proxy.$refs['serform'].resetFields();init()">重置</span>
                <span class="btn search mb10" @click="ExportXlsx()">导出</span>
            </el-form>
        </div>
        <div class="table" id="tb">
            <ul class="head">
                <li class="liflex">单位id</li>
                <li class="liflex">单位名称</li>
                <li class="liflex">省份</li>
                <li class="liaction liflex">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="liflex  flex-center">{{x.company_id}}</li>
                    <li class="liflex flex-center">{{x.name}}</li>
                    <li class="liflex flex-center">{{proxy.$setting.globalData.provinces[x.province-1].name}}</li>
                    <li class="liaction liflex flex-center">
                        <u @click.prevent="edit(x)">编辑</u>
                        <DelConfirm @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        <ElConfigProvider :locale="locale">
            <el-pagination layout="total, prev, pager, next, jumper" background :total="obj.req.count" :page-size="obj.req.pagesize" v-model:currentPage="obj.req.currentpage" @current-change="init()" />
        </ElConfigProvider>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance,onActivated } from 'vue'
    import DelConfirm from '@/components/del_confirm.vue'

    import locale from "element-plus/es/locale/lang/zh-cn";
    import dayjs from 'dayjs'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary:[],
        req:{
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
        }
    })

    onActivated(()=>{
        init()
    })

    let init = () => {
        proxy.$ajax({
            url: '/manager/company/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = () => {
        proxy.routerPushMixin("/companyEdit",{}
    )
    }
    let edit = x => {
        proxy.routerPushMixin("/companyEdit",{id:x.company_id,name:x.name,province:x.province})
    }

    let del = x => {
        proxy.$ajax({
            url: '/manager/company/delete',
            data: { company_id: x.company_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }

    const ExportXlsx = () => {
        proxy.$ajax({
            url: '/manager/company/list',
            data: {...obj.req,currentpage:1,pagesize:10000},
            bfLoading: true
        }).then(d => {
            if(d.success){
                let ary = []
                if (d.msg.list && d.msg.list.length) {
                    d.msg.list.forEach(e => {
                        let data = {
                            company_id: e.company_id,
                            name: e.name,
                            province: proxy.$setting.globalData.provinces[e.province-1].name,
                        }
                        ary.push(data)
                    })
                } else {
                    return
                }
                const fields = [
                    'company_id',
                    'name',
                    'province',
                ]
                const headers = [
                    '单位id',
                    '单位名称',
                    '省份',
                ]
                proxy.$util.ExcelExport(ary, fields, headers, `单位列表${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, 'Sheet', null, [], true)
            }
        }).catch(() => { })
    }
</script>

<style scoped>
</style>